<template>
    <div style='height:100%;' ref='containerRef'>
		<v-chart v-if='value' autoresize :option='options'></v-chart>
        <XLoading v-else></XLoading>
	</div>
</template>

<script lang='ts'>
    import { use } from "echarts/core";
    import { BarChart, LineChart } from 'echarts/charts'
    use([BarChart, LineChart])

    import { defineComponent, reactive, ref, toRef, computed } from "vue";
    interface Props {
		modelValue : {
            long : any[],
            count : any[],
			rate : any[]
        };
	}

    export default defineComponent({
        props : {
			modelValue : {
				type : Object,
				default : function() {
					return null
				}
			}
		},

        setup(props:Props) {
            const value = toRef(props, 'modelValue')


            const options = computed(() => {
                var xAxisData = value.value.long
				var countData = value.value.count
				var rateData = value.value.rate

                var series:any[] = []
                series.push(
					{
						name : '笔数',
                        type: 'bar',
						barWidth : 15,
						itemStyle : {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 1,
								y2: 1,
								colorStops: [{
									offset: 0, color: 'rgba(32,192,254, 1)' // 0% 处的颜色
								}, {
									offset: 1, color: 'rgba(32,192,254, 0)' // 100% 处的颜色
								}]
							}
						},
						data : countData
					}
				)

                series.push(
					{
						name : '占比',
						smooth : true,
						symbol : 'none',
                        type: 'line',
						itemStyle : {
							color : '#59ffaf'
						},
						data : rateData.map((rate, index) => countData[index] * rate / 100),
					}
				)

                var options =  {
					textStyle : {
                        fontFamily : 'sans-serif 微软雅黑'
                    },

					title : {
						text : '笔',
						left : 'center',
                            top : 'top',
                            textStyle : {
                            fontSize : 16,
                            color : '#333'
                        }
					},
					tooltip : {
						show : true,
						trigger : 'axis',
                        formatter(params) {
							var rate = Number((params[1].value * 100 / params[0].value).toFixed(2))
							return `${params[0].axisValueLabel}<br />${params[0].seriesName} <span class="m-l-20">${params[0].value}</span><br />${params[1].seriesName} <span class="m-l-20">${rate}%</span>`
						}
					},

					grid : {
						top : '50px',
						right : '10px',
						bottom : '20px',
						//left : '30px'
					},
					
					
					xAxis: {
						type: 'category',
						axisLine : {
							lineStyle : {
								color : '#3f434e'
							}
						},
						axisTick : {
							show : false
						},
						axisLabel : {
							show : true,
							color : '#becded'
						},
						data: xAxisData
					},
					yAxis: {
						name : '笔',
						nameLocation : 'end',
						nameTextStyle : {
							color:'#fff'
						},
						type: 'value',
						axisLine : {
							lineStyle : {
								color : '#3f434e'
							}
						},
						axisTick : {
							show : true
						},

						axisLabel : {
							show : true,
							color : '#becded'
						},

						splitLine : {
							show : true,
							lineStyle : {
								color : '#3f434e'
							}
						}
					},
					
					series: series
				}

				return options
            })

            return {
                value,
                options
            }
        }
    })
</script>